{% extends "base.html" %}
{% load cctags %}
 
{% block head_ex %} 
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript">
showalbum = function(album){
        $("#name").val(album.name);
        $("#albumid").val(album.id);
        $("#description").val(album.description);
        $("#photocount").html(album.photoslist.length);
        $("#createdate").html(album.createdate);
        $("#updatedate").html(album.updatedate);
        $("option#"+album.id).val(album.name);
        if(album.public)
        {
           $("input[type=radio][name=public][value=true]").attr("checked",'checked');
           $("#"+album.id).html(album.name);
        }
        else
        {
           $("input[type=radio][name=public][value=false]").attr("checked",'checked');
           $("#"+album.id).html(album.name+"({% _ 'private' %})");
        }
        $("#cover_img").attr('src','{{gallery_settings.baseurl}}/thumb/'+album.coverphotoid+'.png');
        buildCoverList(album.photoslist, album.coverphotoid);
}; 
var buildCoverList  = function(coverphtotlist, coverphotoid) {
    $('#coverphoto_select').html('');
    
    $.each( coverphtotlist , function(i,photoid){                           
        var option = $('<option value="'+ photoid +'"></option>');
        option.append(photoid);
        if(coverphotoid == photoid)
        {
            option.attr('selected',true);
        }
        $('#coverphoto_select').append(option);
    });
    $("#coverphoto_select").change(function(){
        var photoid=$(this).children("[selected]").val();
        $("#cover_img").attr('src','{{gallery_settings.baseurl}}/thumb/'+photoid+'.png');
    });
   
    $("#coverphoto_select").keyup(function(){
        var photoid=$(this).children("[selected]").val();
        $("#cover_img").attr('src','{{gallery_settings.baseurl}}/thumb/'+photoid+'.png');
    });
};
$(document).ready(function() {
        $("#albumselect").change(function() {
                  $("#albuminfo").html("{% _ 'Getting album information...' %}")
                  
                  $("#page").block({message: '<h1>{% _ "Getting album information..." %}</h1>', 
                        css: { border: '1px solid #60a0c0',width:"400px" } 
                    });
                  
                  $.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=getalbum",
                    { 'albumname': $(this).val()},
                      function(json){
                           $("#page").unblock();
                           if (json.result=='ok') {
                               showalbum(json.album); 
                           }
                           else
                           {
                               alert(json.msg);
                           }
                       });    
        }); 
        $('#save').click(function() { 
            $("#albuminfo").html("{% _ 'Saving album settings...' %}")
                  
                  $("#page").block({message: '<h1>{% _ "Saving album settings..." %}</h1>', 
                        css: { border: '1px solid #60a0c0',width:"400px" } 
                    });
                  
                  $.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=savealbum",
                    { 'albumid': $('#albumid').val(),'albumname': $('#name').val(), 
                    'description': $('#description').val(), 
                    'public': $("#public").attr('checked'),
                    'coverphotoid': $("#coverphoto_select").children("[selected]").val()},
                      function(json){ 
                           $("#page").unblock();
                           if (json.result=='ok') {
                               showalbum(json.album); 
                           }
                           else
                           {
                               alert(json.msg);
                           }
                      }); 
        });
        $('#clear').click(function() { 
                  $("#page").block({ message: $('#clearquestion'), css: { width: '375px' } });
        });
        $('#clearyes').click(function() {
                  $("#page").unblock();
                  $("#page").block({message: '<h1>{% _ "Cleaning album photos..." %}</h1>', 
                        css: { border: '1px solid #60a0c0',width:"500px" } 
                    });
                  
                  $.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=clearalbum",
                    { 'albumid': $('#albumid').val(),'albumname': $('#name').val(), 
                    'description': $('#description').val(), 
                    'public': $("#public").attr('checked')},
                      function(json){ 
                           $("#page").unblock();
                           if (json.result=='ok') {
                               showalbum(json.album); 
                           }
                           else
                           {
                               alert(json.msg);
                           }
                    });
        });
        
        $('#delete').click(function() { 
                $("#page").block({ message: $('#deletequestion'), css: { width: '375px' } });			  
        });
        $('#deleteyes').click(function() {
                $("#page").unblock();
                $("#page").block({message: '<h1>{% _ "Deleting album..." %}</h1>', 
                        css: { border: '1px solid #60a0c0',width:"500px" } 
                    });
                  
                $.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=deletealbum",
                    { 'albumid': $('#albumid').val(),'albumname': $('#name').val(), 
                    'description': $('#description').val(), 
                    'public': $("#public").attr('checked')},
                      function(json){ 
                          $("#page").unblock();
                          if (json.result=='ok') {
                              $("#"+$('#albumid').val()).remove();
                              showalbum(json.album); 
                              $("#"+$('#albumid').val()).attr('selected', true); 
                           }
                           else
                           {
                               alert('error: '+json.msg);
                           }
                      });
        });

        $('#deleteno').click( function() {$("#page").unblock(); });
        $('#clearno').click( function() {$("#page").unblock(); });
        
});              
</script>
{% endblock %}
 
{% block page %}
<div id="page">
    <form method="post">
    <div id="albumlist">
        <p>{% _ "Albums List" %}:</p>
        <select id="albumselect" name="albumselect" size="8">
            {% for album in albums %}
            <option id="{{album.id}}" value="{{album.name}}">{{album.name}}{% if not album.public %}({% _ "private" %}){% endif %}</option>
            {% endfor %}
        </select>
        
        <p>{% _ "Create Album" %}</p>
        <div id="createalbum">
            <ul><li>{% _ "name" %}: <input id="new_name" name="new_name" type="text" size="18" value=""/></li>
            <li><input type="radio" name="new_public" value="true" checked>{% _ "public" %}</input>
            <input type="radio" name="new_public" value="false">{% _ "private" %}</input></li>
            <li>{% _ "Album Description" %}:</li> 
            <li><textarea wrap="soft" name="new_description" rows="3" cols="18"></textarea> </li>
            <li><input type="submit" value="{% _ 'Create Album' %}" name="createalbum"></li></ul>
        </div>
    </div>
    <div id="albumsettings">
        <table id="admin_table">
        <tr>
            <th scope="row">{% _ "Album Name" %}:</th>
            <td><input id="name" name="name" type="text" size="35" value=""/>
            <input id="albumid" type=hidden name="albumid" value=""> 
            </td>
        </tr>
        <tr>
            <th scope="row">{% _ "Album Description" %}:</th>
            <td><textarea id="description" wrap="soft" name="description" rows="3" cols="25"></textarea>
            </td>
        </tr>
        <tr>
            <th scope="row">{% _ "Permission" %}:</th>
            <td><input id="public" type="radio" name="public" value="true">{% _ "public" %}</input>
                <input type="radio" name="public" value="false">{% _ "private" %}</input>
            </td>
        </tr>
        <tr>
            <th scope="row">{% _ "Cover Photo" %}:</th>
            <td><img id="cover_img"></img> 
            <select id="coverphoto_select">
            </select>
            </td>
        </tr>
        <tr>
            <th scope="row">{% _ "Photo Count" %}:</th>
            <td><div id="photocount"></div>
            </td>
        </tr>
        <tr>
            <th scope="row">{% _ "Date created" %}:</th>
            <td><div id="createdate"></div>
            </td>
        </tr>
        <tr>
            <th scope="row">{% _ "Date updated" %}:</th>
            <td><div id="updatedate"></div>
            </td>
        </tr>
       <tr>
            <th scope="row"><input id="save" type="button" value="{% _ 'Save Settings' %}" name="save"/></th>
            <td>
            <input id="clear" type="button" value="{% _ 'Clean Photos' %}" name="clear"/>({% _ 'careful' %})
            <input id="delete" type="button" value="{% _ 'Delete Album' %}" name="delete"/>({% _ 'more careful' %})
            </td>
       </tr>
       </table>
       <div id="settings_logo">{{gallery_settings.title}}</div>
    </div>
    </form>
    <div id="deletequestion" style="display:none; cursor: default; color: red;">
        <h1>{% _ 'R you seriously delete this album?' %}</h1>
        <input type="button" id="deleteno" value="{% _ 'No, I just try the button' %}" />
        <input type="button" id="deleteyes" value="{% _ 'Yes, just delete it' %}" /> 
    </div>
    <div id="clearquestion" style="display:none; cursor: default; color: red;">
        <h1>{% _ 'Are you seriously clean photos of this album?' %}</h1>
        <input type="button" id="clearno" value="{% _ 'No, I just try the button' %}" />
        <input type="button" id="clearyes" value="{% _ 'Yes, just clean it' %}" />
    </div>
    <div style="clear: both;">&nbsp;</div>
</div>
{% endblock %}
